<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="suggestBoxBase suggestBoxOptionBase suggestBoxOptionColBase" interface="iSuggestBox" src="../suggestBoxBase.xml"/>

		<d:element name="suggestBox" extends="b:suggestBoxBase" implements="b:iSuggestBox">
			

			<d:resource type="text/css"><![CDATA[.btl-suggestBox {
	display: inline-block;
	vertical-align: bottom;
	background-color: #FFFFFF;
	width: 135px;
}
.btl-suggestBox .btl-suggestBox-inner {
	padding: 1px 3px;
}
.btl-suggestBox .btl-suggestBox-input {
	width: 100%;
	border-style: none;
	background-color: #FFFFFF;
	padding: 0;
}
.btl-disabled .btl-suggestBox-input {
	color: GrayText;
}
.btl-suggestBox-dropDown {
	background-color: #FFFFFF;
	overflow-y: auto;
	overflow-x: hidden;
	cursor: default;
}
.btl-suggestBox-dropDown .btl-suggestBoxOptionCol {
	padding: 2px 4px 2px 2px;
}
/* fixes */
.btl-suggestBox-dropDown,
.btl-suggestBox-dropDown * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.gecko1_8 .btl-suggestBox {
	display: -moz-inline-grid;
}
.ie .btl-suggestBox {
	display: inline;
}
.ie .btl-suggestBox .btl-suggestBox-input {
	margin: -1px 0;
}
.btl-suggestBox-dropDown {
	/* Initially set the height of the dropDown to 1px to avoid that really large lists
	   of options cause the page to jump */
	height: 1px;
}
]]></d:resource>

			<d:resource type="text/javascript"><![CDATA[
				btl.suggestBox = {};

				btl.suggestBox.dropDown = {};

				btl.suggestBox.dropDown.setSize = function btl_suggestBox_dropDown_setSize(oSuggestBox, oDropDown){
					if( !oDropDown.getElementsByTagName('tr')[0] )
						oDropDown.style.height = '15px';
					else
						oDropDown.style.height = oDropDown.scrollHeight > 250 ? 250 + 'px' : 'auto';

					//oDropDown.style.width = oSuggestBox.viewNode.offsetWidth + 'px';

					oDropDown.firstChild.style.width = '';

					//prevent the dropDown from being smaller than the input field
					if(oSuggestBox.viewNode.offsetWidth > oDropDown.offsetWidth)
						oDropDown.firstChild.style.width = oSuggestBox.viewNode.offsetWidth - 2 + 'px';
				};
			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<div class="btl-suggestBox btl-groove">
					<div class="btl-suggestBox-inner btl-groove-inner">
						<input type="text" class="btl-suggestBox-input" onbeforedeactivate="if(bb.getControllerFromView(this).__mouseDown){return false;}"/>
						<input type="text" style="display:none;"/>
					</div>
					<div class="btl-suggestBox-dropDown btl-bevel" tabindex="-1" onactivate="var oInput = bb.getControllerFromView(this).viewNode.firstChild.firstChild; if(!oInput.disabled)oInput.focus()">
						<table cellpadding="0" cellspacing="0" border="0" onmousedown="bb.getControllerFromView(this).__mouseDown = true">
							<tbody><d:content/></tbody>
						</table>
					</div>
				</div>
			</d:template>

			<d:attribute name="name" onmap="this.viewNode.getElementsByTagName('input')[1].name = value"/>

			<d:attribute name="opacity">
				<d:mapper type="text/javascript"><![CDATA[
					bb.html.setStyle(this.viewNode, name, value);
					var oDropdown;
					if (oDropdown = this.getProperty('dropDownElement'))
						bb.html.setStyle(oDropdown, name, value);
				]]></d:mapper>
			</d:attribute>

			<d:property name="viewForm" onget="return bb.getControllerFromView(this.viewNode.getElementsByTagName('input')[1].form)"/>

			<d:property name="viewValue" onget="return this.viewNode.getElementsByTagName('input')[1].value" onset="this.viewNode.getElementsByTagName('input')[1].value = value"/>

			<d:property name="viewLabel" onget="return this.viewNode.getElementsByTagName('input')[0].value" onset="this.viewNode.getElementsByTagName('input')[0].value = value"/>

			<d:method name="open">
				<d:body type="text/javascript"><![CDATA[
					// only open if there are options
					if(this.getProperty('options').length > 0){
						// reset the width of the dropDown
						var oDropDown = this.getProperty('dropDownElement');
						btl.suggestBox.dropDown.setSize(this, oDropDown);
						this.callSuper('open');
					}
				]]></d:body>
			</d:method>

			<d:method name="suggest">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('suggest');
					var oDropDown = this.getProperty('dropDownElement');
					btl.suggestBox.dropDown.setSize(this, oDropDown);
					if(this.getProperty('open'))
						bb.html.position(oDropDown, this.viewNode, 'after-start');
				]]></d:body>
			</d:method>

			<d:constructor type="text/javascript"><![CDATA[
				this.setProperty('dropDownElement', this.viewNode.lastChild);
				this.callSuper('__constructor');
			]]></d:constructor>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				//disable userselect on dropdown
				bb.html.disableUserSelect(this.getProperty('dropDownElement'));
			]]></d:handler>
		</d:element>

		<d:element name="suggestBoxOption" extends="b:suggestBoxOptionBase">
			

			<d:template type="application/xhtml+xml">
				<tr><d:content/></tr>
			</d:template>

			<d:property name="highlight">
				
				<d:setter type="text/javascript"><![CDATA[
					if(value){
						bb.html.addClass(this.viewNode, ['btl-chameleon-highlightBackground','btl-chameleon-highlightText']);
						bb.html.scrollIntoView(this.viewNode);
					} else {
						bb.html.removeClass(this.viewNode, ['btl-chameleon-highlightBackground','btl-chameleon-highlightText']);
					}
				]]></d:setter>
			</d:property>

			<d:handler event="mouseenter" type="text/javascript"><![CDATA[
				var oOption = this.viewNode;

				var iIndex = 0;
				var oPrevious = oOption;
				while(oPrevious = oPrevious.previousSibling)
					iIndex++;

				var oSuggestBox = this.getProperty('parentNode');
				oSuggestBox.setProperty('highlightIndex', iIndex);
			]]></d:handler>
		</d:element>

		<d:element name="suggestBoxOptionCol" extends="b:suggestBoxOptionColBase">
			
			<d:template type="application/xhtml+xml">
				<td class="btl-suggestBoxOptionCol"><d:content/></td>
			</d:template>
		</d:element>
	</d:namespace>
</d:tdl>